<template>
    <view class="award_page">
        <template v-if="pageStatus === 'empty'">
            <status-page
                :status="pageStatus"
                customEmptyText="暂无内容"
                :fixed="false"
            ></status-page>
        </template>
        <template v-else>
            <view class="exchange_tip"> 奖励物品均为本人发出奖励，平台概不兑换 </view>
            <scroll-view
                class="scroll_view"
                :scroll-with-animation="true"
                :scroll-y="isScroll"
                :scroll-top="scrollView.scrollTop"
                :show-scrollbar="false"
                lower-threshold="30"
                @scroll="handleScroll"
                @scrolltolower="loadData"
            >
                <SwipeAction
                    :list="list"
                    @handleSrcoll="handleSrcoll"
                    @handleEditBtn="handleEditBtn"
                    @handleDeleteBtn="handleDeleteBtn"
                />
            </scroll-view>
        </template>
        <!-- 添加 -->
        <view class="add_care" @click="handleAddItem">
            <image :src="`${OSS_URL}/add_icon.png`" mode="" class="add_icon"> </image>
        </view>
        <!-- 回到顶部 -->
        <view v-if="scrollView.oldScrollTop > 0" class="top" @click="handleBackTop">
            <image :src="`${OSS_URL}/backTop2.png`" mode="" class="top_icon"> </image>
        </view>
        <!-- 删除提示 -->
        <CustomPopup
            v-model="showCustomPopup"
            titleText="删除提示"
            @handleConfirmBtn="handleConfirmPopup"
        >
            <view class="popup_box"> 是否确认删除？ </view>
        </CustomPopup>
    </view>
</template>

<script setup>
import { nextTick, reactive, ref } from 'vue';
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app';
import { getRewardListApi, deleteRewardApi } from '@/api';
import CustomPopup from '@/Components/CustomPopup/index.vue';
import SwipeAction from './swipeAction.vue';
const OSS_URL = import.meta.env.VITE_OSS_HOST;
const swipeRef = ref(null);
const showCustomPopup = ref(false);
const id = ref(); // 编辑删除id
const pageStatus = ref('');

const scrollView = ref({
    oldScrollTop: 0,
    scrollTop: 0,
});
const isScroll = ref(false);
const timer = ref(null);
const pageInfo = ref({
    pageSize: 10,
    pageNum: 1,
    total: 0,
});
const list = ref([]);
// 新增
function handleAddItem() {
    uni.navigateTo({
        url: '/pages/mine/awardManage/awardItem',
    });
}
// 回到顶部
function handleBackTop() {
    if (timer.value) {
        clearTimeout(timer.value);
    }
    timer.value = setTimeout(() => {
        scrollView.value.scrollTop = scrollView.value.oldScrollTop;
        nextTick(() => {
            scrollView.value.scrollTop = 0;
        });
    }, 300);
}

function handleSrcoll(val) {
    isScroll.value = val;
}

function handleEditBtn(val) {
    uni.navigateTo({
        url: `/pages/mine/awardManage/awardItem?id=${val.id}`,
    });
}

function handleDeleteBtn(val) {
    id.value = val.id;
    showCustomPopup.value = true;
}
// 确认删除
function handleConfirmPopup() {
    deleteRewardApi(id.value).then(res => {
        if (res.code === 200) {
            let index = list.value.findIndex(item => item.id === id.value);
            list.value.splice(index, 1);
            pageInfo.value.total = -1;
            showCustomPopup.value = false;
            uni.showToast({
                title: '删除成功',
                icon: 'none',
            });
        }
    });
}

// 获取奖励列表
function fetchAwardList() {
    // uni.showLoading({
    //     title: '加载中',
    // });
    getRewardListApi({
        ...pageInfo.value,
    })
        .then(res => {
            if (res.code === 200) {
                if (res.rows.length === 0) {
                    pageStatus.value = 'empty';
                } else {
                    pageStatus.value = '';
                    pageInfo.value.total = res.total;
                    for (let i in res.rows) {
                        list.value.push({
                            ...res.rows[i],
                            right: 0,
                        });
                    }
                }
                wx.hideLoading();
            }
        })
        .catch(err => {
            wx.hideLoading();
        });
}

function handleScroll(e) {
    scrollView.value.oldScrollTop = e.detail.scrollTop;
}
// 加载更多
function loadData() {
    if (list.value.length < pageInfo.value.total) {
        pageInfo.value.pageNum++;
        fetchAwardList();
    }
}
onLoad(() => {
    pageInfo.value.pageNum = 1;
    list.value = [{ rewardName: 1 }];
    // fetchAwardList();
});
</script>

<style lang="scss" scoped>
.award_page {
    padding: 10rpx 30rpx 30rpx 30rpx;
    box-sizing: border-box;

    .exchange_tip {
        padding: 20rpx 0 20rpx 30rpx;
        margin-bottom: 20rpx;
        background-color: #615dff;
        border-radius: 20rpx;
        font-size: 30rpx;
        color: #fff;
        line-height: 42rpx;
        font-weight: 400;
    }

    .popup_box {
        margin: 50rpx 0;
        box-sizing: border-box;
    }

    .scroll_view {
        overflow-y: auto;
        height: calc(100vh - 142rpx);
    }

    .award_list {
        margin: 0 0 30rpx 0;
        border-radius: 20rpx;

        .uni-swipe_button {
            border-radius: 20rpx !important;
        }

        .award_item {
            display: flex;
            padding: 30rpx 30rpx 40rpx 30rpx;
            border-radius: 20rpx;
            background-color: #fff;
            box-sizing: border-box;
            color: #333;

            .img {
                margin-right: 30rpx;
                width: 120rpx;
                height: 120rpx;
            }

            .right {
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding: 8rpx 0;
                width: calc(100vw - 270rpx);

                .name {
                    font-size: 32rpx;
                    font-weight: 500;
                }

                .description {
                    margin: 20rpx 0 0 0;
                    font-size: 28rpx;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    box-sizing: border-box;
                }
            }
        }
    }

    .add_care {
        position: fixed;
        bottom: 316rpx;
        right: 30rpx;

        .add_icon {
            width: 100rpx;
            height: 100rpx;
        }
    }

    .top {
        position: fixed;
        bottom: 186rpx;
        right: 30rpx;

        .top_icon {
            width: 100rpx;
            height: 100rpx;
        }
    }
}
</style>
